<template>
  <div class="labReport">
    <div class="search-box">
      <Form inline :label-width="80">
        <FormItem label="ID">
          <Input type="text" v-model="id" placeholder="ID">
          </Input>
        </FormItem>
        <FormItem label="检索条件">
          <Select v-model="paramName" style="width:100px" clearable>
            <Option value="itemName">检验项目名</Option>
            <!--<Option value="itemName">检验项目名</Option>-->
          </Select>
          <Input type="text" v-model="value" placeholder="" style="width:200px">
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="doSearch">搜索</Button>
          <Button type="warning" @click="historySearch">历史版本</Button>
        </FormItem>
      </Form>
    </div>
    <div class="opt">
      <Button type="primary" @click="doSearch">刷新</Button>
      <Button type="success" @click="add">新增</Button>
    </div>
    <div class="data-table">
      <Table border :columns="columns" :data="tableData" size="small" :loading="tableLoading"></Table>
    </div>

    <Drawer
      :title="title"
      v-model="showEdit"
      width="720"
      :mask-closable="false"
      :styles="styles"
    >
      <Form :model="editData" :label-width="80">
        <FormItem label="报告单号" prop="identifier">
          <Input v-model="editData.identifier"/>
        </FormItem>
        <FormItem label="检验项目" prop="code">
          <Select v-model="editData.code" clearable filterable>
            <Option value="18719-5">化学检查</Option>
          </Select>
        </FormItem>
        <FormItem label="报告名称" prop="text">
          <Input v-model="editData.text"/>
        </FormItem>
        <FormItem label="标本" prop="sample">
          <Input v-model="editData.sample"/>
        </FormItem>
        <FormItem label="患者" prop="patientName">
          <Input v-model="editData.patientName"/>
        </FormItem>
        <FormItem label="检验者" prop="tester">
          <Input v-model="editData.tester"/>
        </FormItem>
        <FormItem label="检验发布时间" prop="issued ">
          <DatePicker type="datetime" v-model="editData.issued "/>
        </FormItem>
        <FormItem label="检验时间" prop="effectiveDateTime">
          <DatePicker type="datetime" v-model="editData.effectiveDateTime"/>
        </FormItem>
   <!--     <FormItem label="审核" prop="reviwer">
          <Input v-model="editData.reviwer"/>
        </FormItem>-->
        <FormItem label="结果" prop="subItem" v-if="editData.subItem">
          <Button type="success" @click="editResult=true">编辑结果</Button>

          <labSubItem :row="editData.subItem" style="margin-top: 10px" :is-edit="editResult"></labSubItem>
        </FormItem>
      </Form>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" type="primary" @click="onSubmit">确定</Button>
        <Button type="error" @click="showEdit = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import labSubItem from "./labSubItem"

  export default {
    name: "labReport",
    components: {labSubItem},
    computed: {
      tableData() {
        let jData = [];
        this.$store.state.labReport.labReportList.forEach((entry, i) => {
          let re = entry.resource;
          if (re.total && re.total.myStringValue == '0')
            return;

          let contained = re.contained;
          let patientName;
          let sample;
          let tester;
          let reviwer = '';
          let subItem = [];
          let issued;
          let effectiveDateTime;
          for (i in contained) {
            debugger;
            let sub = {};
            sub.no = contained[i].id.myUnqualifiedId;
            sub.code = (contained[i].code && contained[i].code.coding && contained[i].code.coding[0]) ? contained[i].code.coding[0].code.myStringValue : "";
            sub.display = (contained[i].code && contained[i].code.coding && contained[i].code.coding[0] &&contained[i].code.coding[0].display) ? contained[i].code.coding[0].display.myStringValue : "";
            sub.value = (contained[i].value && contained[i].value.value) ? contained[i].value.value.myStringValue : "";
            sub.unit = (contained[i].value && contained[i].value.unit) ? contained[i].value.unit.myStringValue : "";
            sub.low = (contained[i].referenceRange && contained[i].referenceRange[0].low && contained[i].referenceRange[0].low.value) ? contained[i].referenceRange[0].low.value.myStringValue : "";
            sub.high = (contained[i].referenceRange && contained[i].referenceRange[0].high && contained[i].referenceRange[0].high.value) ? contained[i].referenceRange[0].high.value.myStringValue : "";

            subItem.push(sub);
            sample=(contained[i].specimen && contained[i].specimen.display) ? contained[i].specimen.display.myStringValue:"";
            patientName = (contained[i].subject && contained[i].subject.display) ? contained[i].subject.display.myStringValue : "";
            tester = (contained[i].performer && contained[i].performer[0] && contained[i].performer[0].display) ? contained[i].performer[0].display.myStringValue : "";
          }

          jData.push({

            url:(re  && re.id) ? re.id.myStringValue:"",
            id: (re  && re.id) ? re.id.myUnqualifiedId:"",
            versionId: (re  && re.id) ? re.id.myUnqualifiedVersionId:"" ,
            identifier: (re.identifier && re.identifier[0].value) ? re.identifier[0].value.myStringValue : "",
            code: (re.code && re.code.coding && re.code.coding[0]) ? re.code.coding[0].code.myStringValue : "",
            display: (re.code && re.code.coding && re.code.coding[0]) ? re.code.coding[0].display.myStringValue : "",
            text:(re.code && re.code.text) ? re.code.text.myStringValue : "",
            patientName: patientName,
            tester: tester,
            reviwer: reviwer,
            sample:sample,
             issued :(re && re.issued)?re.issued.myStringValue:"",
            effectiveDateTime:(re && re.effective)?re.effective.myStringValue:"",
            subItem: subItem
          })

        });
        return jData;
      }
    },
    data() {
      return {
        type: 'DiagnosticReport',
        SEQ: 0,
        id: null,
        paramName: null,
        value: null,
        tableLoading: false,
        showEdit: false,
        isUpdate: false,
        title: '',
        editData: {},
        editResult: true,
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        columns: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(labSubItem, {
                props: {
                  row: params.row.subItem,
                  isEdit: false
                }
              })
            }
          },
          {
            title: 'ID',
            key: 'id'
          },
          {
            title: '版本',
            key: 'versionId'
          },
          {
            title: '报告单号',
            key: 'identifier'
          },
          {
            title: '检验项目代码',
            key: 'code'
          },
          {
            title: '检验项目名称',
            key: 'display'
          },
          {
            title: '报告名称',
            key: 'text'
          },
          {
            title: '标本',
            key: 'sample'
          },
          {
            title: '患者',
            key: 'patientName'
          },
          {
            title: '检验者',
            key: 'tester'
          },
          {
            title: '检验发布时间',
            key: 'issued'
          },
          {
            title: '检验时间',
            key: 'effectiveDateTime'
          },
        /*  {
            title: '审核者',
            key: 'reviwer'
          },*/
          {
            title: "操作",
            width: 120,
            type: "render",
            render: (h, params) => {
              return h('div', {
                class: 'btn-wrap'
              }, [
                h('a', {
                  on: {
                    click: () => {
                      this.update(params.row)
                    }
                  }
                }, '编辑'),
                h('Divider', {
                  props: {type: 'vertical'},
                }),
                h('a', {
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                }, '删除'),
              ])
            }
          }
        ]
      }
    },
    created() {
      this.doSearch();
    },
    methods: {
      changeItem(item) {
        console.log(item);
      },
      doSearch() {
        this.tableLoading = true;
        this.$store.dispatch('getLabReportList', {
          type: this.type,
          id: this.id,
          paramName: this.paramName,
          value: this.value,
        }).then(() => {
          this.tableLoading = false;
        }).catch(res => {
          this.$Notice.error({
            title: res.error,
            desc: res.message
          });
          this.tableLoading = false;
        })
      },
      historySearch() {
        if (!this.id) {
          this.$Message.error('请输入ID');
          return;
        }
        this.tableLoading = true;
        this.$store.dispatch('getHistoryLabReportList', {
          type: this.type,
          id: this.id,
        }).then(() => {
          this.tableLoading = false;
        })
      },
      add() {
        this.editData = {
          identifier: "LAB100000" + (++this.SEQ),
          code: "18719-5",
          display: "化学检查",
          text: "生化报告",
          sample: "血清",
          patientName: "刘康",
          tester: "张三",
          issued: '2018-11-01 12:46:48',
          effectiveDateTime:'2018-11-01 13:46:48',
          reviwer: "李四",
          subItem: [
            {
              no: "1",
              code: "2951-2",
              display: "钠",
              value: "",
              unit: "mmol/L",
              low: "135",
              high: "145"
            },
            {
              no: "2",
              code: "2823-3",
              display: "钾",
              value: "",
              unit: "mmol/L",
              low: "3.5",
              high: "5.3"
            },
            {
              no: "3",
              code: "2075-0",
              display: "氯化物",
              value: "",
              unit: "mmol/L",
              low: "96",
              high: "108"
            },
            {
              no: "4",
              code: "2028-9",
              display: "二氧化碳",
              value: "",
              unit: "mmol/L",
              low: "22",
              high: "34"
            }, {
              no: "5",
              code: "33037-3",
              display: "阴离子间隙",
              value: "",
              unit: "mmol/L",
              low: "8",
              high: "16"
            }
          ]
        };
        this.showEdit = true;
        this.isUpdate = false;
        this.title = '新增检验报告';
      },
      update(row) {
        this.editData = JSON.parse(JSON.stringify(row));
        this.showEdit = true;
        this.isUpdate = true;
        this.title = '更新检验报告';
      },
      remove(row) {
        this.$store.dispatch('deleteLabReport', {
          type: this.type,
          id: row.id
        }).then(() => {
          this.$Message.success('删除成功');
          this.id = row.id;
          this.doSearch();
        });
      },
      onSubmit() {
        if (this.isUpdate) {
          console.log(this.editData)
          this.$store.dispatch('updateLabReport', Object.assign({type: this.type}, this.editData)).then(() => {
            this.$Message.success('更新成功');
            this.showEdit = false;
            this.id = this.editData.id;
            this.doSearch();
          });
        } else {
          this.$store.dispatch('createLabReport', Object.assign({type: this.type}, this.editData)).then((res) => {
            this.$Message.success('新增成功');
            this.showEdit = false;
            this.id = res.data.myId.myUnqualifiedId;
            this.doSearch();
          });
        }
      }
    }
  }
</script>

<style scoped>
  .data-table {
    margin-top: 10px;
  }

  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
